<template>
  <div>
    <!--  -->
    <div class="mokuai1">
      <h3>全局组件跟局部组件：当操作底层的dom元素时候就要用到自定义组件</h3>
      <p>需求：进入页面input输入框就获取焦点</p>
      <p>全局组件使用：在main里面,把名字传过来，但是vue规定要前面加个v-xxx，全局指令在main可以任何组件都能访问使用</p>
      <input type="text" v-focus />
      <p v-red>这里是局部组件,上面的那个全局组件没有获取焦点是因为底下的局部自定义事件，局部指令只能本组件使用</p>
      <input type="text" v-focuss />
    </div>
    <div class="mokuai1">
      <h3>自定义的钩子函数，文档自己了解</h3>
      <h3>动态钩子函数，自己了解文档</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  // 局部组件跟全局组件区别 directive是要加directives
  directives: {
    focuss: {
      inserted(el) {
        el.focus();
      }
    },
    red: {
      inserted(el) {
        el.style.color = "red";
      }
    }
  }
};
</script>

<style>
.mokuai1 {
  border: 1px solid red;
  margin-bottom: 30px;
}
.colorred {
  color: red;
}
h2 {
  color: aqua;
}
h3 {
  color: brown;
}
</style>